<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('考试结果')" />
</head>
<style>
	.qu-content{
		border-bottom: #eee 1px solid;
		padding-bottom: 10px;
	}
	.qu-content div{
		line-height: 30px;
	}
	.el-checkbox-group label,.el-radio-group label{
		width: 100%;
	}
	.card-title{
		background: #eee;
		line-height: 35px;
		text-align: center;
		font-size: 14px;
	}
	.card-line{
		padding-left: 10px
	}
	.card-line span {
		cursor: pointer;
		margin: 2px;
	}
</style>
<body class="white-bg">
    <div id="app" class="wrapper wrapper-content animated fadeInRight ibox-content">
		<h2 class="text-center">{{ paperData.title }}</h2>
    	<p class="text-center" style="color: #666">{{ paperData.createTime }}</p>
   	 	<el-row :gutter="24" style="margin-top: 50px">
	        <el-col :span="8" class="text-center">
				考生姓名：{{ paperData.userName }}
	        </el-col>
		    <el-col :span="8" class="text-center">
		      	考试用时：{{ userTime }}分钟
		    </el-col>
		    <el-col :span="8" class="text-center">
				考试得分：{{ paperData.userScore }}
		    </el-col>
   		</el-row>
   		<el-card style="margin-top: 20px">
   			 <div v-for="item in paperData.paperQuList" :key="item.id" class="qu-content">
   			 	<p>{{ item.sort + 1 }}.{{ item.content }}（得分：{{ item.actualScore }}）</p>
   			 	<div v-if="item.quType == '1' || item.quType=='3'">
   			 		<el-radio-group v-model="radioValues[item.id]">
   			 			<el-radio v-for="an in item.answerList" :key="an.id" :label="an.id">
   			 			{{ an.abc }}.{{ an.content }}
   			 			</el-radio>
          			</el-radio-group> 
          			<el-row :gutter="24">
          				<el-col :span="12" style="color: #24da70">
             		 		正确答案：{{ radioRights[item.id] }}
            			</el-col>
            			<el-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              				答题结果：未答
            			</el-col>
            			<el-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              				答题结果：{{ myRadio[item.id] }}
            			</el-col>
            			<el-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
            				  答题结果：{{ myRadio[item.id] }}
           				 </el-col>
           			</el-row>	 
   			 	</div>
   			 	<div v-if="item.quType == '2'">
   			 		<el-checkbox-group v-model="multiValues[item.id]">
            			<el-checkbox v-for="an in item.answerList" :key="an.id" :label="an.id">
            				{{ an.abc }}.{{ an.content }}
            			</el-checkbox>
          			</el-checkbox-group>
          			<el-row :gutter="24">
            			<el-col :span="12" style="color: #24da70">
              				正确答案：{{ multiRights[item.id].join(',') }}
            			</el-col>
            			<el-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              				答题结果：未答
            			</el-col>
            			<el-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              				答题结果：{{ myMulti[item.id].join(',') }}
            			</el-col>
            			<el-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
              				答题结果：{{ myMulti[item.id].join(',') }}
            			</el-col>
          			</el-row>
   			 	</div>
   			 </div>
   		</el-card>
	</div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript" >
    	var model = [[${model}]];
		var vObj = new Vue({
			el: '#app',
			data(){
				return{
					paperData:{
						paperQuList: []
					},
					radioValues: {},
				    multiValues: {},
				    radioRights: {},
				    multiRights: {},
				    myRadio: {},
				    myMulti: {},
				    userTime:0
				}
			},
			methods: {
				
			},
			created(){
				if(model){
					this.paperData = model;
					// 填充该题目的答案
			        this.paperData.paperQuList.forEach((item) => {
			        	let radioValue = '';
	                 	let radioRight = '';
	                 	let myRadio = '';
	                 	let multiValue = [];
	                 	let multiRight = [];
	                 	let myMulti = [];
	                 	item.answerList.forEach((an) => {
                         	// 用户选定的
                        	if (an.checked) {
                            	if (item.quType == '1' || item.quType == '3') {
                             		radioValue = an.id
                            		myRadio = an.abc
                           		} else {
                            		multiValue.push(an.id)
                             		myMulti.push(an.abc)
                           		}
                         	}
	                        // 正确答案
	                        if (an.isRight) {
	                        	if (item.quType == '1' || item.quType == '3') {
	                            	radioRight = an.abc
	                            } else {
	                              	multiRight.push(an.abc)
	                            }
	                        }
	                    })
	                    this.multiValues[item.id] = multiValue
	                    this.radioValues[item.id] = radioValue
	                    this.radioRights[item.id] = radioRight
	                    this.multiRights[item.id] = multiRight
	                    this.myRadio[item.id] = myRadio
	                    this.myMulti[item.id] = myMulti
			        });
			        this.userTime =  Math.ceil(this.paperData.userTime/60);
				}
			}
		})
	</script>
</body>
</html>
